import GanttContext from "../../gantt/context";
import { useContext } from "react";
import { ChevronLeft, ChevronRight } from "./icons";
import { cn } from "../helpers/utils";

interface SplitProps {
    style: React.CSSProperties;
}

const SplitButton = ({ hideTask }: { hideTask: boolean }) => {
    const Icon = hideTask ? ChevronRight : ChevronLeft;
    return <Icon className="text-white" size={16} />;
};

function Split({ style }: SplitProps) {
    const { hideTask, setHideTask } = useContext(GanttContext);
    return (
        <>
            {hideTask ? null : <div
                className="z-10 h-full flex items-center justify-center bg-orange-500/50 shadow-lg hover:bg-orange-500 hover:cursor-col-resize"
                style={style}
            />}
            <div
                className={cn("h-12 w-4 bg-orange-500/50 hover:bg-orange-500 absolute z-20 rounded-r-md flex items-center hover:cursor-pointer", hideTask ? "ml-4" : "ml-5")}
                onClick={() => {
                    setHideTask(!hideTask);
                }}
            >
                <SplitButton hideTask={hideTask} />
            </div>
        </>
    );
}

export default Split;
